
<html lang='zh-CN'>
<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <style>
        .preview-suitable-app {
            overflow: visible;
            height: calc(100% - 20px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .app-border {
            transform-origin: center;
            position: relative;
            border-radius: 30px 30px 30px 30px;
        }
        .app-border::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border: 4px solid rgb(51, 51, 51);
            border-radius: 30px 30px 30px 30px;
        }
        iframe {
            transform-origin: left top;
            border-radius: 26px;
            overflow: hidden;
        }
        .app-border-right {
            position: absolute;
            top: 259px;
            right: -15px;
        }
        .app-border-footer {
            width: 395px;
            height: 38px;
            position: absolute;
            bottom: 8px;
            left: -1px;
            border-radius: 0 0 16px 16px;
        }
        ::-webkit-scrollbar {
            width: 0px;
            background: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="preview-suitable-content-app" class="preview-suitable-app">
        <div class="app-border" style="width: 393px;height: 852px;transform:scale(0.9002347417840375);">
            <iframe id="iframe" class="vueIframeApp" style="border:none;width: 100%;height: 100%;"></iframe>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const html = "<html lang='zh-CN'>\n        <head >\n        <meta charset='UTF-8'/>\n<meta name='viewport' content='width=device-width, initial-scale=1.0'/>\n<title >个人中心</title>\n<script src='https://res.gemcoder.com/js/reload.js'><\/script>\n<script src='https://cdn.tailwindcss.com'><\/script>\n<link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>\n<script >tailwind.config = {\n  theme: {\n    extend: {\n      colors: {\n        primary: '#165DFF',\n        secondary: '#4080FF',\n        accent: '#69B1FF',\n        light: '#E8F3FF',\n        dark: '#0E1D49',\n        gray: {\n          100: '#F5F7FA',\n          200: '#E5E6EB',\n          300: '#C9CDD4',\n          400: '#86909C',\n          500: '#4E5969',\n          600: '#272E3B',\n          700: '#1D2129'\n        }\n      },\n      fontFamily: {\n        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']\n      }\n    }\n  }\n};<\/script>\n<style type='text/tailwindcss'>\n        @layer utilities {\n            .content-auto {\n                content-visibility: auto;\n            }\n            .text-shadow {\n                text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n            }\n            .bg-gradient-blue {\n                background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);\n            }\n            .transition-transform-opacity {\n                transition-property: transform, opacity;\n            }\n        }\n    </style>\n    \n        <style>\n            ::-webkit-scrollbar { width: 0px; }\n        </style>\n    </head>\n<body class='bg-gray-100 font-sans text-gray-700 min-h-screen flex flex-col'>\n        <!-- 顶部导航栏 -->\n<header class='bg-white shadow-sm sticky top-0 z-50'>\n        <div class='container mx-auto px-4 py-3 flex items-center justify-between'>\n        <button class='text-gray-500 hover:text-primary transition-colors'>\n        <i class='fas fa-arrow-left text-xl'>\n        </i>\n    </button>\n<h1 class='text-xl font-semibold text-gray-700'>\n        个人中心\n    </h1>\n<button class='text-gray-500 hover:text-primary transition-colors'>\n        <i class='fas fa-cog text-xl'>\n        </i>\n    </button>\n    </div>\n    </header>\n<!-- 主内容区 -->\n<main class='flex-grow'>\n        <!-- 用户信息卡片 -->\n<section class='bg-white rounded-2xl shadow-sm mx-4 my-5 overflow-hidden transform transition-all duration-300 hover:shadow-md'>\n        <div class='bg-gradient-blue p-6 text-white'>\n        <div class='flex items-center'>\n        <div class='relative mr-4'>\n        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/ee903b9d667ec47cf98a5c58fb555014.png' alt='用户头像' class='w-20 h-20 rounded-full border-4 border-white object-cover shadow-lg'/>\n<div class='absolute bottom-0 right-0 bg-green-500 rounded-full w-5 h-5 border-2 border-white'>\n        </div>\n    </div>\n<div >\n        <h2 class='text-[clamp(1.25rem,3vw,1.5rem)] font-bold text-shadow'>\n        张明\n    </h2>\n<p class='text-light/90 flex items-center mt-1'>\n        <i class='fas fa-id-card-alt mr-1'>\n        </i>\n<span >\n        高级会员\n    </span>\n    </p>\n    </div>\n    </div>\n    </div>\n    </section>\n<!-- 功能菜单 -->\n<section class='bg-white rounded-2xl shadow-sm mx-4 my-5 overflow-hidden'>\n        </section>\n<!-- 个人设置列表 -->\n<section class='bg-white rounded-2xl shadow-sm mx-4 my-5 overflow-hidden'>\n        <div class='px-5 py-4 border-b border-gray-100'>\n        <h3 class='font-semibold text-gray-700'>\n        个人设置\n    </h3>\n    </div>\n<ul class='divide-y divide-gray-100'>\n        <li >\n        <a href='javascript:void(0);' class='flex items-center justify-between px-5 py-4 hover:bg-gray-50 transition-colors'>\n        <div class='flex items-center'>\n        <div class='w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-4'>\n        <i class='fas fa-user text-blue-500'>\n        </i>\n    </div>\n<span class='text-gray-700'>\n        个人资料\n    </span>\n    </div>\n<i class='fas fa-chevron-right text-gray-400'>\n        </i>\n    </a>\n    </li>\n<li >\n        <a href='javascript:void(0);' class='flex items-center justify-between px-5 py-4 hover:bg-gray-50 transition-colors'>\n        <div class='flex items-center'>\n        <div class='w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4'>\n        <i class='fas fa-shield-alt text-green-500'>\n        </i>\n    </div>\n<span class='text-gray-700'>\n        账号安全\n    </span>\n    </div>\n<i class='fas fa-chevron-right text-gray-400'>\n        </i>\n    </a>\n    </li>\n<li >\n        <a href='javascript:void(0);' class='flex items-center justify-between px-5 py-4 hover:bg-gray-50 transition-colors'>\n        <div class='flex items-center'>\n        <div class='w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4'>\n        <i class='fas fa-bell text-purple-500'>\n        </i>\n    </div>\n<span class='text-gray-700'>\n        通知设置\n    </span>\n    </div>\n<i class='fas fa-chevron-right text-gray-400'>\n        </i>\n    </a>\n    </li>\n<li >\n        <a href='javascript:void(0);' class='flex items-center justify-between px-5 py-4 hover:bg-gray-50 transition-colors'>\n        <div class='flex items-center'>\n        <div class='w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center mr-4'>\n        <i class='fas fa-gift text-amber-500'>\n        </i>\n    </div>\n<span class='text-gray-700'>\n        会员中心\n    </span>\n    </div>\n<div class='flex items-center'>\n        <span class='text-xs bg-primary/10 text-primary px-2 py-1 rounded-full mr-2'>\n        升级\n    </span>\n<i class='fas fa-chevron-right text-gray-400'>\n        </i>\n    </div>\n    </a>\n    </li>\n<li >\n        <a href='javascript:void(0);' class='flex items-center justify-between px-5 py-4 hover:bg-gray-50 transition-colors'>\n        <div class='flex items-center'>\n        <div class='w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-4'>\n        <i class='fas fa-question-circle text-red-500'>\n        </i>\n    </div>\n<span class='text-gray-700'>\n        帮助与反馈\n    </span>\n    </div>\n<i class='fas fa-chevron-right text-gray-400'>\n        </i>\n    </a>\n    </li>\n    </ul>\n    </section>\n<!-- 退出登录按钮 -->\n<section class='px-4 my-5'>\n        <button id='logoutBtn' class='w-full py-3 bg-white border border-gray-200 rounded-xl text-gray-500 font-medium hover:bg-gray-50 transition-colors flex items-center justify-center'>\n        <i class='fas fa-sign-out-alt mr-2'>\n        </i>\n<span >\n        退出登录\n    </span>\n    </button>\n    </section>\n    </main>\n<!-- 退出登录确认弹窗 -->\n<div id='logoutModal' class='fixed inset-0 bg-black/50 z-50 items-center justify-center hidden'>\n        <div class='bg-white rounded-2xl w-5/6 max-w-sm mx-4 transform transition-all duration-300 scale-100 opacity-100'>\n        <div class='p-6 text-center'>\n        <div class='w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4'>\n        <i class='fas fa-exclamation-triangle text-red-500 text-2xl'>\n        </i>\n    </div>\n<h3 class='text-xl font-semibold text-gray-700 mb-2'>\n        确认退出登录？\n    </h3>\n<p class='text-gray-500 mb-6'>\n        您确定要退出当前账号吗？退出后将无法使用部分功能。\n    </p>\n<div class='flex justify-center gap-4'>\n        <button id='cancelLogout' class='px-6 py-2 border border-gray-200 rounded-xl text-gray-500 hover:bg-gray-50 transition-colors'>\n        取消\n    </button>\n<button id='confirmLogout' class='px-6 py-2 bg-primary text-white rounded-xl hover:bg-primary/90 transition-colors'>\n        确认退出\n    </button>\n    </div>\n    </div>\n    </div>\n    </div>\n<script >// 页面加载时初始化\ndocument.addEventListener('DOMContentLoaded', function () {\n  // 获取DOM元素\n  var logoutBtn = document.getElementById('logoutBtn');\n  var logoutModal = document.getElementById('logoutModal');\n  var cancelLogout = document.getElementById('cancelLogout');\n  var confirmLogout = document.getElementById('confirmLogout');\n\n  // 打开退出登录弹窗\n  logoutBtn.addEventListener('click', function () {\n    logoutModal.classList.remove('hidden');\n    logoutModal.classList.add('flex');\n\n    // 添加动画效果\n    var modalContent = logoutModal.querySelector('div');\n    modalContent.classList.remove('scale-100', 'opacity-100');\n    modalContent.classList.add('scale-95', 'opacity-0');\n    setTimeout(function () {\n      modalContent.classList.remove('scale-95', 'opacity-0');\n      modalContent.classList.add('scale-100', 'opacity-100');\n    }, 10);\n  });\n\n  // 关闭退出登录弹窗\n  var closeModal = function closeModal() {\n    var modalContent = logoutModal.querySelector('div');\n    modalContent.classList.remove('scale-100', 'opacity-100');\n    modalContent.classList.add('scale-95', 'opacity-0');\n    setTimeout(function () {\n      logoutModal.classList.add('hidden');\n      logoutModal.classList.remove('flex');\n    }, 300);\n  };\n  cancelLogout.addEventListener('click', closeModal);\n  confirmLogout.addEventListener('click', function () {\n    // 模拟退出登录操作\n    alert('已退出登录');\n    closeModal();\n  });\n\n  // 点击弹窗外部关闭\n  logoutModal.addEventListener('click', function (e) {\n    if (e.target === logoutModal) {\n      closeModal();\n    }\n  });\n\n  // 为卡片添加悬停效果动画\n  var cards = document.querySelectorAll('section.rounded-2xl');\n  cards.forEach(function (card) {\n    card.addEventListener('mouseenter', function () {\n      card.classList.add('transform', 'translate-y-[-5px]');\n    });\n    card.addEventListener('mouseleave', function () {\n      card.classList.remove('transform', 'translate-y-[-5px]');\n    });\n  });\n});<\/script>\n    </body>\n    </html>";
        iframe.srcdoc = html;
    });
</script>
</html>
